<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="8">
        <pie-chart id="questionnaireStats" :title="title" :data-source="datasource" />
      </el-col>
      <el-col :span="16">
        <box-list title="已提交" :columns="columns" :data="feedbacks">
          <el-table-column label="" align="center" width="120" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button title="退回" type="text" size="mini" icon="el-icon-back" @click="rollback(row)" />
              <el-button title="下载" type="text" size="mini" icon="el-icon-download" @click="download(row)" />
            </template>
          </el-table-column>
        </box-list>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { formatDate } from '@neu/biz-core/utils/utils'
import { mapGetters } from 'vuex'
import axios from 'axios'
import { list as listUser } from '@neu/auth-ui/api/user'
import { detail } from '@neu/dcom-ui/api/questionnaire'
import { rollback, download } from '@neu/dcom-ui/api/questionnairefeedback'
import { detail as operationGroupDetail } from '@neu/dcom-ui/api/operationGroup'
import PieChart from '@neu/biz-core/components/Charts/PieChart'
import BoxList from '@neu/biz-core/components/BoxList'
import { formatDate } from '@neu/biz-core/utils/utils'
export default {
  name: 'QuestionnaireViewForm',
  components: {
    BoxList,
    PieChart
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      title: '',
      feedbacks: [],
      datasource: [],
      columns: [
        { title: '姓名', key: 'user' },
        { title: '提交时间', key: 'submitAt' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    isWorkerGroupLeader: function() {
      return this.roles.some(r => r === 'workerGroupLeader')
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      const that = this
      detail(this.id).then(response => {
        this.title = response.data.title
        const feedbacks = response.data.feedbacks
        this.feedbacks = feedbacks

        const datasource = [['已提交', feedbacks.length]]
        if (this.isWorkerGroupLeader) {
          operationGroupDetail(response.data.groupCode).then(groupInfo => {
            const residents = []
            groupInfo.data.institutionsList.forEach(inst => {
              inst.residents.forEach(r => {
                residents.push(r.name)
              })
            })
            datasource.push(['未提交', residents.length - feedbacks.length])

            this.datasource = datasource
          })
        } else {
          axios.all([listUser({ s_roleCode: 'zongjian' }), listUser({ s_roleCode: 'workerGroupLeader' })]).then(axios.spread(function(r1, r2) {
            datasource.push(['未提交', r1.data.length + r2.data.length - feedbacks.length])
            that.datasource = datasource
          }))
        }
      })
    },
    // 导出
    download(row) {
      download(row.id).then(res => {
        const content = res
        const blob = new Blob([content])
        const fileName = this.$attrs.task.title + '-' + row.user + '-' + formatDate(row.submitAt, 'YYYY-MM-DD') + '.docx'
        // not IE downLoad
        if ('download' in document.createElement('a')) {
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    rollback(row) {
      rollback(row.id).then(response => {
        this.$message({
          showClose: true,
          message: '已回退重新填写',
          type: 'warning'
        })
        this.fetch()
      })
    }
  }
}
</script>
